// $('.des-box').hover(function(){
//     $('div.box-hide').show(500);
// },function(){
//     $('div.box-hide').hide(500);
// });

$('.play-img').masonry({
    transitionDuration: 0
});

var start = 1;//页面刚加载好之后请求的数据;
var index = 8;//以后每次加载请求的数据;
//var count = 4;
var isLord = true;

var timer = null;

load();
//把处理数据的功能封装成一个方法;
function handleData(res) {
    var str = '';
    $.each(res.data,function(k,v){
        v['pageUrl'] = 'http://www.jiguo.com/' + v['pageUrl'];
        var sm = handleStr(v.tagList);
        var dm = handleDiv(v.content);
        str += `<div class="box">
        <div class="box-img">
            <img src="${v.imgUrl}" alt="">
               </div>
            <div class="des-box">
                <div class="box-hover">
                    <div class="info">
                        <p><a href="${v.pageUrl}">${v.title}</a></p>
                    </div>
                    ${sm}
                    <div class="e-number">
                        <span class="e-apply-number">
                           ${v.numLeft.slice(0,-2)}
                      </span>
                        参与
                           <span class="e-query">${v.numRight}</span>
                    </div>
                   ${dm}
                </div>
            </div>
        </div> `
    })
    //   console.log(str);
    $('.play-img').masonry({
        transitionDuration: 0
    }).append(str).masonry('appended', str).masonry();
}


//实现滚动加载更多;
$(window).scroll(function () {
    clearTimeout(timer);
    var that = $(this);
    timer = setTimeout(function () {
        //窗口被卷去的头部
        var scrollH = that.scrollTop();
        //获取窗口的高度
        var clientH = $(window).height();
        //当滚动到最后一张图片距顶部的高度时就加载数据;
        var lastTop = $('.box:last').offset().top;
        //最后一张图片的高度;
        var h = ($('.box:last').height()) / 2;
        if (scrollH + clientH >= lastTop + h) {
            console.log('可以加载数据了~');
            if (!isLord) {
                return;
            }
            load();
        }
    }, 200)
});

//定义一个加载数据的方法;
function load() {
    console.log(index);
    isLoad = false;
    //flag = true;
    $.ajax({
        url: 'http://api.jg.com/goods/tryproducts',
        method: 'post',
        dataType: 'json',
        data: {
            start: start,
            currentNum: index
        },
        success: function (res) {
            console.log(res);
            handleData(res);
            isLord = true;
            start = index + 1;
            index += res.data.length;
        }
    })
}


function handleStr(str) {
    var arr = str.split('#');
    //console.log(arr);
    var str2 = '<div class="e-tag-list">';
    arr.forEach(element => {
        if (element.includes('免费试用')) {
            str2 += `<span class="orange">${element}</span>`
        } else if (element.includes('体验师专享')) {
            str2 += `<span class="yellow">${element}</span>`
        } else if (element.includes('折扣试用')) {
            str2 += `<span class="purple">${element}</span>`
        }
    });
    str2 += `</div>`;
    return str2;
}

function handleDiv(str) {
    var strData = str.split('#').filter(function (item) {
        return item != '';
    })
    //console.log(strData.length);
    var count;
    var str2 = '<div class="box-hide">';
    for (var i = 0; i < strData.length / 2; i++) {
        str2 += `<div class="hide-cell">`;
        for (var j = 2 * i; j <= (2 * i + 1); j++) {
            if(j%2!=0){
                str2 += `<span class="fr">${strData[j]}</span>`;
            }else{
                str2 += `<span>${strData[j]}</span>`;
            }

        }
        str2 += `</div>`;
    }
    str2 += '</div>';
    return str2;
}


// $('.des-box').hover(function(){
//     console.log(123);
//     $(this).find('div.box-hide').show(500);
// },function(){
//     $(this).find('div.box-hide').hide(500);
// });

$('.play-img').on('mouseenter mouseleave','.des-box',function(){
    $(this).find('.box-hide').stop().toggle(500);
});